<template>
  <div>
    <van-search
      class='search'
      :value='val'
      placeholder="请输入用户姓名"
      use-action-slot
      @search="onSearch"
      @change="onChange"
      @clear='onClear'
    >
      <view slot="action" @tap="onSearch">搜索</view>
    </van-search>
    <div class="list" v-if="list.length > 0">
      <div class="cus_item" v-for="(item, index) in list" :key="index"  @click="linkDetail(item.id)">
        <div class="right flex1">
          <div class="fs34 mb15 df jsb aic"><span>{{item.ship_name}}<span class="fs24 colorBlue" style="margin-left:20rpx">({{item.org_name}})</span></span>
          <div class="fs26 c_4c4c4c">
            <span class="redColor" v-if="item.state === '0'">已保存</span>
            <span class="greenColor" v-if="item.state === '1'">已提醒</span>
            <span class="mainColor" v-if="item.state === '2'">已处理</span>
          </div></div>
          <div class="fs30 c_4c4c4c">客户名称：{{item.customer_name}} </div>
          <div class="fs30 c_4c4c4c">发货日期：{{item.ship_datetime}}</div>
          <div class="fs30 c_4c4c4c"><span>发货地址：{{item.ship_address}}</span></div>
        </div>
      </div>
    </div>
    <div class="nodate fs30 tc" v-else>暂无数据</div>
    <div class="addBtn tc fs30 mainBgColor" @click="add_cz_record" v-if="!isManage">添写运输单</div>
  </div>
</template>

<script>
import { getshipList } from '@/api'
export default {
  components: {
  },
  data () {
    return {
      val: '',
      list: [],
      uploadUrl: '',
      isManage: false
    }
  },
  methods: {
    async onClear (e) {
      await this.getOneList()
    },
    async onSearch () {
      await this.getOneList(this.val)
    },
    async onChange (event) {
      this.val = event.mp.detail
      await this.getOneList(this.val)
    },
    linkDetail (id) {
      // const url = `../cz_record_detail/main?id=${id}`
      // wx.navigateTo({url})
      const url = '../add_notice/main?text=edit&id=' + id
      wx.navigateTo({url})
    },
    add_cz_record () {
      const url = '../add_notice/main?text=add'
      wx.navigateTo({url})
    },
    async getList (data, page) {
      const res = await getshipList(data, page)
      if (res.data) {
        for (let i in res.data.data) {
          this.list.push(res.data.data[i])
        }
        this.page = res.data.currentPage
        this.totalPage = res.data.totalPages
      }
    },
    async getOneList (v) {
      const res = await getshipList(v, 1)
      if (res.data) {
        this.list = res.data.data
        this.page = res.data.currentPage
        this.totalPage = res.data.totalPages
      }
    }
  },
  async onLoad () {
    var role = mpvue.getStorageSync('useInfo').role
    if (role.length > 0) {
      for (let i in role) {
        if (role[i].id === '1') {
          this.isManage = true
        }
      }
    }
    await this.getOneList()
  },
  async onShow () {
    await this.getOneList()
  },
  async onPullDownRefresh () {
    await this.getOneList(this.val)
    wx.stopPullDownRefresh()
  },
  onReachBottom () {
    if (this.page < this.totalPage) {
      this.page++
      this.getList(this.val, this.page)
    }
  }
}
</script>

<style scoped>
.cus_item{border-bottom:1px solid #eee;padding: 20rpx;font-size: 28rpx;}
.left{width: 120rpx;height: 120rpx;margin-right: 20rpx;}
.left img{width: 100%;height: 100%;}
.status1{color: #2f74ff}
.status2{color: red}
.mr15{margin-right: 15rpx}
.search{position: fixed;width: 100%;}
.addBtn{position: fixed;bottom: 0;left: 0;width: 100%;height: 100rpx;line-height: 100rpx;color: #fff;}
.list{padding-bottom: 120rpx;padding-top: 90rpx;}
.nodate{padding: 100rpx 0;color: #666}
.redColor{color: red}
.greenColor{color:blueviolet}
</style>
